/**
 * 高阶组件封装步骤：
  1. 创建一个函数，名称约定以 with 开头 
  2. 指定函数参数，参数应该以大写字母开头（作为要渲染的组件）
  3. 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回 
  4. 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
  5. 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件,并将其渲染到页面中 
 */
import React from "react";

/**
 *
 * @param {*} WrappedComponent 手机（UI）
 */
const withMouse = (WrappedComponent) => {
  //  手机壳=》增强后的组件
  return class Mouse extends React.Component {
    // 复用：状态逻辑（数据功能）
    // 定义响应数据
    state = {
      x: 0,
      y: 0,
    };

    componentDidMount() {
      // 注册鼠标移动事件=》获取鼠标移动后在页面的坐标点
      window.addEventListener("mousemove", this.handlerMove);
    }

    handlerMove = (e) => {
      // console.log(e);
      this.setState({
        x: e.x,
        y: e.y,
      });
    };

    componentWillUnmount() {
      // 解绑事件
      window.removeEventListener("mousemove", this.handlerMove);
    }

    render() {
      // 渲染UI
      // return <WrappedComponent x={this.state.x} y={this.state.y} />;
      return <WrappedComponent {...this.state} {...this.props} />;
    }
  };
};

export default withMouse;
